<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
	<meta name="format-detection" content="telephone=no" />
	<script>
		var html = document.getElementsByTagName('html')[0];
		html.style.fontSize = html.clientWidth / 3.75 + "px";
	</script>
    <title>个人资料</title>
    <link rel="stylesheet" href="../static/css/Reset.css"/>
    <link rel="stylesheet" href="../static/css/personalData.css"/>
    <!--<link rel="stylesheet" type="text/css" href="../static/css/signIn.css"/>-->
</head>
<body>
<div class="wz_wrapper" id="personalDetail">
	<ul id="list" class="list" v-cloak>
		<form id="uploadAjaxImage" method="post" enctype="multipart/form-data">
		<li class="txsc">
    		<h4>头像</h4>
    		<input type="file" name="file" id="multi-file" accept="image/*"/>
    		<p id="file-list" class="touxiang"><img :src="detail.headPicURL" class="headPicURL"></p>
		</li>
		</form>
    	<li @click="clickModify(1)">姓名    <img class="rt" src="../static/images/go.png" /><em>{{detail.nickName}}</em></li>
    	<li @click="clickModify(2)">公司    <img class="rt" src="../static/images/go.png" /><em>{{detail.company}}</em></li>
	    <li @click="clickModify(3)">职位    <img class="rt" src="../static/images/go.png" /><em>{{detail.position}}</em></li>
		<li @click="clickModify(6)">手机号<img class="rt" src="../static/images/go.png" /><em>{{detail.mobile}}</em></li>
		<li @click="clickModify(4)">地区    <img class="rt" src="../static/images/go.png" /><em>{{detail.areaName}}</em></li>
		<!--<li @click="clickModify(5)">角色    <img class="rt" src="../static/images/go.png" /><em>{{detail.roleName}}</em></li>-->
	</ul>
	<!--修改姓名-->
	<div id="modifyName" class="warp">
		<div class="wenzi">
			<textarea id="userName" maxlength="10" name="userName" rows="2" placeholder="请输入姓名"></textarea>
			<!--<span id="BZmsg" class='Max_msg'>10</span>-->
		</div>
		<div class="prompt">2-10个字</div>
		<div @click="modifySubmit($event,1)" class="subbutton">
			<span class="ss">保存</span>
	    </div>
	</div>
	<!--修改公司名-->
	<div id="modifyCompany" class="warp">
		<div class="wenzi">
			<textarea id="userCompany" maxlength="15" name="userCompany" rows="2" placeholder="请输入公司名"></textarea>
			<!--<span id="BZmsg" class='Max_msg'>15</span>-->
		</div>
		<div class="prompt">2-15个字</div>
		<div @click="modifySubmit($event,2)" class="subbutton">
			<span class="ss">保存</span>
	    </div>
	</div>
	<!--修改职位-->
	<div id="modifyPosition" class="warp">
		<div class="wenzi">
			<textarea id="userPosition" maxlength="15" name="userPosition" rows="2" placeholder="请输入职位"></textarea>
			<!--<span id="BZmsg" class='Max_msg'>15</span>-->
		</div>
		<div class="prompt">2-15个字</div>
		<div @click="modifySubmit($event,3)" class="subbutton">
			<span class="ss">保存</span>
	    </div>
	</div>
	<!--修改地区-->
	<section id="areaLayer" class="express-area-box">
	    <header>
	        <h3>选择地区</h3>
	        <a v-show="isCity" @click="getProvince()" id="backUp" class="back" href="javascript:void(0)" title="返回"></a>
	        <a v-show="isCout" @click="getCity($event)" class="back backCity" href="javascript:void(0)" title="返回"></a>
	        <a id="closeArea" class="close" href="javascript:void(0)" title="关闭"></a>
	    </header>
	    <article id="areaBox">
	        <ul id="areaList" class="area-list">
	        	<li v-show="isProv" v-for="prov in provinceData" :id="prov.id" @click="getCity($event)">{{prov.name}}</li>
	        	<li v-show="isCity" v-for="city in cityData" :id="city.id" @click="getCounty($event)">{{city.name}}</li>
	        	<li v-show="isCout" v-for="coun in countyData" :id="coun.id" @click="modifySubmit($event,4)">{{coun.name}}</li>
	        </ul>
	    </article>
	</section>
	<!--修改角色-->
	<div id="modifyRole" class="warp">
		<ul class="roles">
			<li :id="role.code" @click="modifySubmit($event,5)">{{roles[0].value}}</li>
			<li class="gray" v-for="role in roles2" @click="noSelect" :id="role.code">{{role.value}}</li>
		</ul>
	</div>
	<!--修改手机号-->
	<div id="modifyMobile" class="mobileBg">
		<div class="mobileDiv">
			<p>您当前的手机号为<span>{{detail.mobile}}</span>，如果您需要修改手机号，请输入新手机号，输入验证码确认</p>
			<div class="phone" id="modifyMobile_phone">
				<div class="mobItem">
					<input type="tel" id="tel" class="content" placeholder="请输入手机号码" />	
					<i class="clear"><img src="../static/images/clear.png" alt="" /></i>
				</div>
				<div class="mobItem">
					<input type="tel" id="yz" class="content" placeholder="请输入验证码" />
					<div class="msgs">获取验证码</div>
				</div>
				<p class="subMob" id="submit">确定</p>
		</div>
	</div>
	<!--loading组件-->
	<loading v-show="showLoading"></loading>
</div>
</body>
<!--<script src="https://api.map.baidu.com/api?v=2.0&ak=HuWMDRmExUdhWoXsVSnBgqdvtWzhgfDY&s=1"></script>-->
<script type="text/javascript" src="../libs/jquery.min.js"></script>
<script type="text/javascript" src="../libs/jquery.validate.min.js"></script>
<script type="text/javascript" src="../libs/fastclick.min.js"></script>
<script type="text/javascript" src="../libs/vue/vue.min.js"></script>
<script type="text/javascript" src="../libs/vue/vue-resource.min.js"></script>
<script type="text/javascript" src="../libs/require.js"></script>
<script type="text/javascript" src="../libs/var.js"></script>
<script type="text/javascript" src="../libs/common.js"></script>
<script type="text/javascript" src="./js/personalData.js"></script>
</html>